<script>
export default {
  name: 'NavigationBar',
  methods: {
    goTo() {
      console.log(1);
      this.$router.push('/largeScreen');
    },
  },
};
</script>

<template>
  <div class="navigation-bar-container">
    <div class="header">快捷入口</div>
    <ul>
      <li>
        <span class="img">
          <img src="../../../assets/images/1.png" alt="">
        </span>
        <span class="text">添加企业</span>
      </li>
      <li>
        <span class="img">
          <img src="../../../assets/images/2.png" alt="">

        </span>
        <span class="textt">员工管理</span>
      </li>
      <li>
        <span class="img">
          <img src="../../../assets/images/3.png" alt="">

        </span>
        <span class="text">添加账单</span>
      </li>
      <li @click="goTo">
        <span class="img">
          <img src="../../../assets/images/4.png" alt="">
        </span>
        <span class="text">数据大屏</span>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.navigation-bar-container {
  padding: 15px;
  background-color: #fff;

  ul {
    list-style: none;
    display: flex;

    li {
      cursor: pointer;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      span {
        margin: 10px 0;
      }

      .img {
        width: 47px;

        img {
          width: 100%;
        }
      }

      .text {
        width: 100%;
        display: block;
        font-size: 14px;
        text-align: center;
      }
    }
  }
}
</style>
